<template>
  <view class="container">
    <!-- 轮播图 -->
    <swiper 
      class="swiper" 
      :indicator-dots="true" 
      :autoplay="true" 
      :interval="3000" 
      :duration="500"
      indicator-active-color="#4a8cff"
      indicator-color="rgba(255, 255, 255, 0.5)"
    >
      <swiper-item v-for="(item, index) in banners" :key="index">
        <view class="swiper-item" :style="{background: item.bgColor}">
          <text class="swiper-title">{{ item.title }}</text>
          <text class="swiper-desc">{{ item.desc }}</text>
        </view>
      </swiper-item>
    </swiper>
    
    <!-- 主标题 -->
    <view class="header">
      <text class="title">数学能力训练</text>
      <text class="subtitle">提升你的数学思维能力</text>
    </view>
    
    <!-- 菜单网格 -->
    <view class="menu-grid">
      <view 
        v-for="(item, index) in menuItems" 
        :key="index"
        class="menu-card"
        :style="{backgroundColor: item.bgColor}"
        @click="handleCardClick(item)"
        :animation="animationData[index]"
        @touchstart="() => startAnimation(index)"
        @touchend="() => resetAnimation(index)"
      >
        <view class="card-content">
          <uni-icons 
            :type="item.icon" 
            size="30" 
            color="white" 
            class="card-icon"
          ></uni-icons>
          <text class="card-title">{{ item.title }}</text>
          <text class="card-desc">{{ item.desc }}</text>
        </view>
        <view class="card-wave"></view>
      </view>
    </view>

  </view>
</template>

<script setup>
import { ref } from 'vue';

// 轮播图数据
const banners = ref([
  {
    title: '数学思维训练',
    desc: '每日练习，提升你的数学能力',
    bgColor: 'linear-gradient(to right, #4a8cff, #6ab5ff)'
  },
  {
    title: '基础计算能力',
    desc: '打好数学基础，从计算开始',
    bgColor: 'linear-gradient(to right, #5aa1ff, #7ac0ff)'
  }
]);

// 菜单项数据
const menuItems = ref([
  {
    title: '基础计算练习',
    desc: '训练最基本的加减乘除，打好数密基础',
    bgColor: '#4a8cff',
    icon: 'calculator',
	url:'/pages/basicCalculation/index'
  },
  {
    title: '思维能力训练',
    desc: '在潜移默化中提升思维能力或反应能力',
    bgColor: '#5aa1ff',
    icon: 'brain'
  },
  {
    title: '数字推理训练',
    desc: '通过大量训练提高数字推理的敏感性，尚在建设中',
    bgColor: '#6ab5ff',
    icon: 'chart-line'
  },
  {
    title: '资料分析专项',
    desc: '提供实际做题中常用公式的专项练习',
    bgColor: '#7ac0ff',
    icon: 'file-text'
  }
]);

// 动画相关
const animationData = ref(Array(menuItems.value.length).fill(null));
const animations = ref(Array(menuItems.value.length).fill(null));

const startAnimation = (index) => {
  animations.value[index] = uni.createAnimation({
    duration: 200,
    timingFunction: 'linear'
  });
  animations.value[index].scale(0.95).step();
  animationData.value[index] = animations.value[index].export();
};

const resetAnimation = (index) => {
  animations.value[index].scale(1).step();
  animationData.value[index] = animations.value[index].export();
};

const handleCardClick = (item) => {
  if(!item?.url){
	 uni.showToast({
	   title: `点击了${item.title}`,
	   icon: 'none'
	 }); 
  }else{
	  uni.navigateTo({
	  	url: item.url
	  });
  }
 
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(to bottom, #f7fbfe, #e6f2ff);
  padding-bottom: 20rpx;
}

/* 轮播图样式 */
.swiper {
  height: 300rpx;
  margin: 20rpx 30rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(74, 140, 255, 0.2);
  
  .swiper-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40rpx;
    box-sizing: border-box;
  }
  
  .swiper-title {
    font-size: 36rpx;
    font-weight: bold;
    color: white;
    margin-bottom: 15rpx;
    text-align: center;
  }
  
  .swiper-desc {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
  }
}

/* 标题样式 */
.header {
  padding: 30rpx 40rpx;
  text-align: center;
  
  .title {
    display: block;
    font-size: 42rpx;
    font-weight: bold;
    color: #2a5caa;
    margin-bottom: 10rpx;
    animation: fadeInDown 0.8s;
  }
  
  .subtitle {
    display: block;
    font-size: 26rpx;
    color: #7a9ccc;
    animation: fadeInDown 1s;
  }
}

/* 菜单网格样式 */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
  padding: 0 30rpx;
  margin-top: 20rpx;
}

/* 卡片样式 */
.menu-card {
  border-radius: 20rpx;
  padding: 30rpx;
  height: 240rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10rpx 20rpx rgba(74, 140, 255, 0.2);
  transition: all 0.3s ease;
  
  .card-content {
    z-index: 2;
  }
  
  .card-icon {
    margin-bottom: 15rpx;
  }
  
  .card-title {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    color: white;
    margin-bottom: 10rpx;
  }
  
  .card-desc {
    display: block;
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
  }
  
  .card-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20rpx;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 100% 100% 0 0 / 20rpx;
    animation: wave 4s infinite linear;
  }
}

/* 页脚样式 */
.footer {
  margin-top: 50rpx;
  text-align: center;
  font-size: 24rpx;
  color: #9ab5d9;
  animation: fadeIn 2s;
}

/* 动画定义 */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes wave {
  0% {
    transform: translateX(-50%) scaleX(2);
  }
  50% {
    transform: translateX(0) scaleX(1);
  }
  100% {
    transform: translateX(50%) scaleX(2);
  }
}
</style>